<template>
	<view>
		<view class="info">
			<view class="receiptinfo" @click="goto('../personalinfo/personalinfo')">
				<view class="receiptinfo_text" v-if="Object.keys(this.receiptinfo).length!=0">
					<view class="receiptinfo_up">
						{{receiptinfo.userRealName}} : {{receiptinfo.userTel}}
					</view>
					<view class="receiptinfo_down">
						<view class="receiptinfo_down_icon">
							<u-icon name="map-fill" color="#ff7733" size="40"></u-icon>
						</view>
						<view class="receiptinfo_down_text">{{receiptinfo.userDetailedAddress}}</view>
					</view>
				</view>
				<view class="receiptinfo_text" v-else>
					<view class="receiptinfo_text_noinfo">
						请完善个人信息
					</view>
				</view>
				<view class="receiptinfo_icon">
					<u-icon name="arrow-right" color="#bebebe" size="20"></u-icon>
				</view>
			</view>
			<view class="goodsinfo">
				<view class="goodsimage">
					<u-image width="100%" height="100%" border-radius="10" :src='goodsinfo.imagesrc'></u-image>
				</view>
				<view class="goodstext">
					<view class="goodname">{{goodsinfo.name}}</view>
					<view class="goodother">单价：{{goodsinfo.price}}元/kg</view>
					<view class="goodother">地区：{{goodsinfo.adress}}</view>
					<view class="goodother">上货日期：{{goodsinfo.great_time}}</view>
				</view>
			</view>
		</view>
		<view class="goodsneed">
			<view class="need">产品需求</view>
			<u-form :model="needinfo" ref="uForm" class="needinfo">
				<view class="needwidth">
					<u-form-item label="重量(kg)" class="needheight1" label-width='150' prop="weight"
						:label-style="{'height':'30rpx'}">
						<u-input v-model="needinfo.weight" type="text" height="30" />
					</u-form-item>
					<u-form-item label="备注" class="needheight2" prop="remark">
						<u-input v-model="needinfo.remark" type="textarea" :auto-height="true" />
					</u-form-item>
				</view>
			</u-form>
			<button class="custom-style" shape="circle" @click="placeorder()">下单</button>
		</view>
		<!-- 弹窗签字 -->
		<u-popup v-model="showpopup" mode="center" class="popupsign" :mask-close-able="false" :closeable="true">
			<sign @closepopup="closepopup" @returnsign="getsign"></sign>
		</u-popup>
	</view>
</template>

<script>
	import sign from '../../components/sign/signwx.vue';
	import {
		pathToBase64
	} from '../../../js_sdk/mmmm-image-tools/index.js'
	export default {
		components: {
			sign
		},
		data() {
			return {
				showpopup: false,
				mysign: '',
				receiptinfo: {
					// openid:'',
					// username: '姓名',
					// phone: '收货人电话号码',
					// adress: '收获地址'
				},
				goodsinfo: {},
				needinfo: {
					weight: '', //重量
					remark: '' // 备注
				},
				from: {
					addressUUId: '',
					goodsUUId: '',
					base64: '',
					kilogram: '', //重量
					remark: '' // 备注
				},
				rules: {
					weight: [{
						required: true,
						message: '请填写重量',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur']
					}, {
						pattern: /^[0-9_/.]+$/,
						message: '错误的字符',
						trigger: ['blur']
					}],
					remark: [{
						max: 50,
						message: '最多填写50个字符',
						trigger: ['change', 'blur']
					}, {
						pattern: /^[a-zA-Z0-9_/.\u4e00-\u9fa5,\.，。]+$/,
						message: '错误的字符',
						trigger: ['blur']
					}]
				}
			}
		},
		methods: {
			showloading() {
				uni.showToast({
					title: '请稍后',
					icon: 'loading',
					duration: 2000
				});
				return 0;
			},
			async getsign(signdata) { //得到签名后提交订单
				const x = await this.showloading()
				// let that = this
				await pathToBase64(signdata).then(bs=> {
					this.from.base64 = bs;
				}) 
				this.from.addressUUId = this.receiptinfo.uuid;
				this.from.goodsUUId = this.goodsinfo.uuid;
				this.from.kilogram = this.needinfo.weight;
				this.from.remark = this.needinfo.remark;
				// this.from.base64 = that.mysign;
				// console.log(this.from)
				this.$myRequest({
					url: '/contractOrder/placeOrder',
					method: 'post',
					json: 'json',
					data: this.from,
				}).then((res) => {
					if (res.data.code === 200) {
						setTimeout(() => {
							this.goto('../operatesuccess/operatesuccess');
						}, 1000)
					}
				})
			},
			getuserinfo() {
				this.receiptinfo = getApp().globalData.userinfo;
			},

			goto(url) {
				let turl = url + '?delta=3&' + 'successtext=下单成功';
				// console.log(turl);
				uni.navigateTo({
					url: turl,
					animationType: 'slide-in-right',
					animationDuration: 1000

				})
			},
			closepopup(value) { //关闭弹出层
				// console.log(value);
				if (value === 'false') {
					this.showpopup = false;
				};
			},
			placeorder() { //验证规则
				if (!this.receiptinfo.uuid) {
					uni.showToast({
						title: '请完善个人信息',
						icon: 'error'
					})
					return 0;
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.showpopup = true;
					}
				})

			}

		},
		onReady() { //生命周期
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(option) {
			if (option) {
				// console.log(option);
				this.goodsinfo = option;
			}
			this.getuserinfo();
		}
	}
</script>

<style>
	@import url("place_order.css");
</style>
